<div id="gradeable-rubric" class="gradeable" data-gradeable_id="{{ gradeable.id }}">
    {% block header_content %}
    {% endblock %}
{# Components #}
    {# twig.js doens't support blocks inside of for loops ... ANNOYING #}
    <div id="component-list">
        {% block components_block %}
        {% endblock %}
    </div>
{# /Components #}

    {% block footer_content %}
    {% endblock %}
</div>

<script type="text/javascript">
    //
    // This is needed to resolve conflicts between Chrome and other browsers
    //   where Chrome can only do synchronous ajax calls on 'onbeforeunload'
    //   and other browsers can only do synchronous ajax calls on 'onunload'
    //
    // Reference:
    //    https://stackoverflow.com/questions/4945932/window-onbeforeunload-ajax-request-in-chrome
    //
    var __unloadRequestSent = false;
    function unloadSave() {
        if (!__unloadRequestSent) {
            __unloadRequestSent = true;
            AJAX_USE_ASYNC = false;
            closeAllComponents(true)
                .catch(function () {
                    // Unable to save so try saving at a different time
                    __unloadRequestSent = false;
                });
        }
    }
    // Will work for Chrome
    window.onbeforeunload = unloadSave;
    // Will work for other browsers
    window.onunload = unloadSave;
</script>
